import React, { Component } from 'react';
import { HeartFilled } from '@ant-design/icons';
import  './BusinessDetails.scss'

import { Rate,ImageViewer } from 'antd-mobile';

class BusinessDetails extends Component {
    constructor(props) {
        super(props);

        this.state = { 
            like:false
        }
    }

    like(){
        if(!this.state.like){
            React.$toast.show({
                icon: 'success',
                content: '感谢您的收藏!',
                duration:1000
            })
           
        }else{
            // React.$toast.show({
            //     icon: 'success',
            //     content: '谢谢您的喜欢!',
            // })
        }
        this.setState({like:!this.state.like})
        
    }
    
    render() { 
        return (
            <div className="BusinessDetails">
                <div className="detail-block block1">
                    <div className="header">
                        <div className="left">
                            <div className="title">{this.props.sellerData.name}</div>
                            <div className="rate">
                                <Rate className="star-style" readOnly defaultValue={this.props.sellerData.score} />
                                <div className="mgl16">({this.props.sellerData.ratingCount})</div>
                                <div className="mgl24">月售{this.props.sellerData.sellCount}单</div>
                            </div>
                        </div>
                        <div className="right" onClick={()=>{this.like()}}>
                            <HeartFilled className={`icon ${this.state.like?'icon-like':'icon-unlike'}`}></HeartFilled>
                            <div className="text">
                                {this.state.like?'已收藏':'点击收藏'}
                            </div>
                        </div>
                    </div>
                    <div className="sellerinfo">
                        <div className="block">
                            <div className="title">起送价</div>
                            <div className="content">
                                <div className="number">{this.props.sellerData.minPrice}</div>
                                <div className="unit">元</div>
                            </div>
                        </div>
                        <div className="block">
                            <div className="title">商家配送</div>
                            <div className="content">
                                <div className="number">{this.props.sellerData.deliveryPrice}</div>
                                <div className="unit">元</div>
                            </div>
                        </div>
                        <div className="block">
                            <div className="title">平均配送时间</div>
                            <div className="content">
                                <div className="number">{this.props.sellerData.deliveryTime}</div>
                                <div className="unit">分钟</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="detail-block block2">
                    <div className="title-block">公告与活动</div>
                    <div className="textarea">{this.props.sellerData.bulletin}</div>
                    <div className="discounts-list">
                       {
                           this.props.sellerData.supports?this.props.sellerData.supports.map((el,index)=>{
                                return(
                                    <div className="discounts" key={index}>{el.description}</div>  
                                )
                            }):''
                           
                       }
                    </div>
                </div>
                <div className="detail-block block3">
                    <div className="title-block">商家实景</div>
                    <div className="img-list">
                        {
                           this.props.sellerData.pics?this.props.sellerData.pics.map((el,index)=>{
                                return(
                                    <img
                                        key={index}
                                        className="img"
                                        src={el}
                                        onClick={(e)=>{ImageViewer.Multi.show({ images: [e.target.currentSrc]})}}
                                    />
                                )
                            }):''
                           
                       }
                        
                    </div>
                </div>
                <div className="detail-block block4">
                    <div className="title-block">商家信息</div>
                    <div className="list">
                       {
                           this.props.sellerData.infos?this.props.sellerData.infos.map((el,index)=>{
                                return(
                                    <div className="item" key={index}>{el}</div>  
                                )
                            }):''
                           
                       }
                    </div>
                </div>
            </div>
        );
    }
}
 
export default BusinessDetails;